let blockUIDemo = function () {
    
    let demo1 = function () {
        // default
        $('#block-ui-1-1').click(function() {
            EApp.block('#block-ui-1-content', {});

            setTimeout(function() {
                EApp.unblock('#block-ui-1-content');
            }, 1000 * 3);
        });

        $('#block-ui-1-2').click(function() {
            EApp.block('#block-ui-1-content', {
                overlayColor: '#000000',
                size: 'lg',
                state: 'brand'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-1-content');
            }, 1000 * 3);
        });

        $('#block-ui-1-3').click(function() {
            EApp.block('#block-ui-1-content', {
                overlayColor: '#000000',
                type: 'border',
                state: 'success'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-1-content');
            }, 1000 * 3);
        });

        $('#block-ui-1-4').click(function() {
            EApp.block('#block-ui-1-content', {
                overlayColor: '#000000',
                state: 'success',
                message: 'Please wait...'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-1-content');
            }, 1000 * 3);
        });

        $('#block-ui-1-5').click(function() {
            EApp.block('#block-ui-1-content', {
                overlayColor: '#000000',
                type: 'border',
                state: 'brand',
                message: 'Processing...'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-1-content');
            }, 1000 * 3);
        });
    };

    // card
    let demo2 = function () {
        // default
        $('#block-ui-2-1').click(function() {
            EApp.block('#block-ui-2-portlet', {});

            setTimeout(function() {
                EApp.unblock('#block-ui-2-portlet');
            }, 1000 * 3);
        });

        $('#block-ui-2-2').click(function() {
            EApp.block('#block-ui-2-portlet', {
                overlayColor: '#000000',
                size: 'lg',
                state: 'brand'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-2-portlet');
            }, 1000 * 3);
        });

        $('#block-ui-2-3').click(function() {
            EApp.block('#block-ui-2-portlet', {
                overlayColor: '#000000',
                type: 'border',
                state: 'success'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-2-portlet');
            }, 1000 * 3);
        });

        $('#block-ui-2-4').click(function() {
            EApp.block('#block-ui-2-portlet', {
                overlayColor: '#000000',
                state: 'success',
                message: 'Please wait...'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-2-portlet');
            }, 1000 * 3);
        });

        $('#block-ui-2-5').click(function() {
            EApp.block('#block-ui-2-portlet', {
                overlayColor: '#000000',
                type: 'border',
                state: 'brand',
                message: 'Processing...'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-2-portlet');
            }, 1000 * 3);
        });
    };

    // page
    let demo3 = function () {
        // default
        $('#block-ui-3-1').click(function() {
            EApp.blockPage();

            setTimeout(function() {
                EApp.unblock();
            }, 1000 * 3);
        });

        $('#block-ui-3-2').click(function() {
            EApp.blockPage({
                overlayColor: '#000000',
                size: 'lg',
                state: 'brand'
            });

            setTimeout(function() {
                EApp.unblock();
            }, 1000 * 3);
        });

        $('#block-ui-3-3').click(function() {
            EApp.blockPage({
                overlayColor: '#000000',
                type: 'border',
                state: 'success'
            });

            setTimeout(function() {
                EApp.unblock();
            }, 1000 * 3);
        });

        $('#block-ui-3-4').click(function() {
            EApp.blockPage({
                overlayColor: '#000000',
                state: 'success',
                message: 'Please wait...'
            });

            setTimeout(function() {
                EApp.unblock();
            }, 1000 * 3);
        });

        $('#block-ui-3-5').click(function() {
            EApp.blockPage({
                overlayColor: '#000000',
                type: 'border',
                state: 'brand',
                message: 'Processing...'
            });

            setTimeout(function() {
                EApp.unblock();
            }, 1000 * 3);
        });
    };

    // 模态框
    let demo4 = function () {
        // default
        $('#block-ui-4-1').click(function() {
            EApp.block('#block-ui-4-1-modal .modal-dialog', {});

            setTimeout(function() {
                EApp.unblock('#block-ui-4-1-modal .modal-dialog');
            }, 1000 * 3);
        });

        $('#block-ui-4-2').click(function() {
            EApp.block('#block-ui-4-2-modal .modal-dialog', {
                overlayColor: '#000000',
                size: 'lg',
                state: 'brand'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-4-2-modal .modal-dialog');
            }, 1000 * 3);
        });

        $('#block-ui-4-3').click(function() {
            EApp.block('#block-ui-4-3-modal .modal-dialog', {
                overlayColor: '#000000',
                type: 'border',
                state: 'success'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-4-3-modal .modal-dialog');
            }, 1000 * 3);
        });

        $('#block-ui-4-4').click(function() {
            EApp.block('#block-ui-4-4-modal .modal-dialog', {
                overlayColor: '#000000',
                state: 'success',
                message: 'Please wait...'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-4-4-modal .modal-dialog');
            }, 1000 * 3);
        });

        $('#block-ui-4-5').click(function() {
            EApp.block('#block-ui-4-5-modal .modal-dialog', {
                overlayColor: '#000000',
                type: 'border',
                state: 'brand',
                message: 'Processing...'
            });

            setTimeout(function() {
                EApp.unblock('#block-ui-4-5-modal .modal-dialog');
            }, 1000 * 3);
        });
    };

    return {
        init: function() {
            demo1();
            demo2(); 
            demo3(); 
            demo4(); 
        }
    };
}();

$(document).ready(function() {
    blockUIDemo.init();
});